<template>
  <div class="box">
    <div class="banner"></div>
    <div class="f1">
      <div class="breadcrumb">
        <h6 @click="back">
          <img src="@/assets/home/back.png" alt="" />
          返回上一页
        </h6>
      </div>
      <div class="f1_content">
        <h6 class="title">选择企业认证类型</h6>
        <h5>企业认证类型</h5>
        <div class="typeList">
          <ul>
            <li :class="{ native: native == 1 }" @click="native = 1">
              <div class="enterprise">
                <img
                  :src="
                    require(`@/assets/home/组${native == 1 ? '67' : '63'}.png`)
                  "
                  alt=""
                />
                <h3>外贸企业</h3>
              </div>
            </li>
            <li :class="{ native: native == 2 }" @click="native = 2">
              <div class="enterprise">
                <img
                  :src="
                    require(`@/assets/home/组${native == 2 ? '68' : '64'}.png`)
                  "
                  alt=""
                />
                <h3>物流服务商</h3>
              </div>
            </li>
            <li :class="{ native: native == 3 }" @click="native = 3">
              <div class="enterprise">
                <img
                  :src="
                    require(`@/assets/home/组${native == 3 ? '69' : '65'}.png`)
                  "
                  alt=""
                />
                <h3>仓储服务商</h3>
              </div>
            </li>
            <li :class="{ native: native == 4 }" @click="native = 4">
              <div class="enterprise">
                <img
                  :src="
                    require(`@/assets/home/组${native == 4 ? '70' : '66'}.png`)
                  "
                  alt=""
                />
                <h3>关务服务商</h3>
              </div>
            </li>
          </ul>
        </div>
        <!-- 服务协议 -->
        <div class="agreement">
          <img
            @click="submitBtn()"
            :src="require(`@/assets/home/组${radio ? '89' : '90'}.png`)"
            alt=""
          />
          <span> 阅读并同意 </span>
          <a href="../../static/协议/企业授权协议.pdf" target="_back"
            >《企业授权协议》</a
          >
        </div>
        <div class="btn">
          <button :disabled="isLock" @click="goRiskDetails">下一步</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLock: false,
      radio: false, //企业授权服务状态变量
      native: 1,
    };
  },
  mounted() {
    document.documentElement.scrollTop = 0;
  },
  methods: {
    // 返回上一页
    back() {
      this.$router.go(-1);
    },
    submitBtn() {
      this.radio = !this.radio;
    },
    goRiskDetails() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 3000);
      if (!this.radio) return this.$Message.error("请阅读并勾选协议");
      sessionStorage.setItem("rzid", "");
      localStorage.setItem("type", this.native);
      this.$router.push("/flow1");
    },
  },
};
</script>

<style lang="scss" scoped>
/*去掉列表前面的小点*/
ul {
  list-style: none;
}
.box {
  position: relative;
  width: 100%;
  height: 800px;
  box-sizing: border-box;
  padding-bottom: 80px;
  background: #f5f7fa;
  .banner {
    position: absolute;
    width: 100%;
    height: 276px;
    background: url(@/assets/home/组56.png);
    background-size: 100% 100%;
    z-index: 0;
  }
  .f1 {
    width: 100%;
    position: absolute;
    .breadcrumb {
      position: relative;
      margin: 0 auto;
      width: 1200px;
      height: 80px;
      background-color: rgba(255, 255, 255, 0);
      h6 {
        position: absolute;
        right: 30px;
        box-sizing: border-box;
        padding-top: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 35px;
        font-size: 16px;
        font-weight: 300;
        color: #ffffff;
        text-decoration: underline;
        img {
          width: 16px;
          margin-right: 8px;
        }
      }
    }
    .f1_content {
      box-sizing: border-box;
      padding: 22px 30px;
      margin: 0 auto;
      width: 1200px;
      // height: 800px;
      background: #fff;
      border-radius: 4px;
      .title {
        display: flex;
        align-items: center;
        width: 100%;
        height: 65px;
        font-size: 20px;
        font-weight: 400;
        color: #013367;
        border-bottom: 1px solid #e0e0e0;
      }
      h5 {
        text-align: center;
        font-size: 18px;
        font-weight: 400;
        color: #171717;
        margin: 55px 0 55px 0;
      }
      .typeList {
        margin: 0 auto;
        width: 1000px;
        height: 173px;
        ul {
          display: flex;
          justify-content: space-around;
          li {
            .enterprise {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              height: 100%;
              h3 {
                font-size: 16px;
                font-weight: 400;
                color: #3c3c3c;
                margin-top: 26px;
              }
              img {
                width: 220px;
                height: 147px;
              }
            }
            &.native {
              h3 {
                color: #2b8ae8;
                margin-top: scale(1.2);
              }
              img {
                transform: scale(1.2);
              }
            }
          }
        }
      }
      // 服务协议
      .agreement {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 25px;
        text-align: center;
        margin: 120px 0 40px 0;
        user-select: none;
        span {
          font-size: 14px;
          color: #b3b3b3;
          margin-left: 7px;
        }
        img {
          width: 15px;
          height: 15px;
          cursor: pointer;
        }
        a {
          cursor: pointer;
          font-size: 14px;
          color: #0a7be0;
        }
      }
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        button {
          align-items: center;
          justify-content: center;
          display: flex;
          border-radius: 5px;
          width: 230px;
          height: 40px;
          background: #0a7be0;
          font-size: 16px;
          font-weight: 300;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
